<template>
  <div class="h-full">
    <div v-for="(item,index) in list" :key="index" class="py-3">
      <CommentItem :item="item" :key="index"></CommentItem>
    </div>
    <n-button ref="targetRef" v-if="list.length<itemCount" @click="handleMore" text block>已经到底</n-button>
    <n-button v-else text block>已经到底</n-button>
  </div>
</template>

<script setup lang="ts">
import {PropType, ref, watch} from "vue";
import {useElementVisibility} from "@vueuse/core";
import CommentItem from "@/components/pc/item/CommentItem.vue";
 defineProps({
  list: {
    type: Array as PropType<IComment[]>,
    default: () => []
  },
  itemCount: {
    type: Number,
    default: 0
  }
})
const emits = defineEmits(['handleMore'])

const targetRef = ref(null)
const targetIsVisible = useElementVisibility(targetRef)

watch(targetIsVisible, () => {
  if (targetIsVisible.value) {
    emits('handleMore')
  }
})


const handleMore = () => {
  emits('handleMore')
}


</script>

<style scoped>

</style>